Ana içeriğe geç

CoreUI Nedir?

CoreUI, yönetim panelleri ve dashboard uygulamaları geliştirmek için tasarlanmış, açık kaynaklı bir UI framework'üdür. Bootstrap tabanlı olan CoreUI, hazır bileşenler ve şablonlar sunar.

// React ile CoreUI kullanımı örneği
import { CCard, CCardBody, CCardHeader } from '@coreui/react';

function Dashboard() {
  return (
    <CCard>
      <CCardHeader>
        Dashboard İstatistikleri
      </CCardHeader>
      <CCardBody>
        <CRow>
          <CCol sm={6}>
            <CWidget
              color="primary"
              header="89.9%"
              text="Kullanıcı Memnuniyeti"
            />
          </CCol>
          <CCol sm={6}>
            <CWidget
              color="info"
              header="12,628"
              text="Toplam Kullanıcı"
            />
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>
  );
}
ipucu

CoreUI'yi projenize eklemek için: npm install @coreui/coreui @coreui/react komutlarını kullanabilirsiniz.

Temel Özellikler​

  • Hazır admin panel şablonları
  • Responsive tasarım
  • Modern UI bileşenleri
  • Tema desteği
  • Çoklu framework desteği (React, Vue, Angular)
  • RTL desteği
  • Özelleştirilebilir yapı

Önemli Nokta: CoreUI, yönetim paneli geliştirme sürecini hızlandırmak için tasarlanmış, kullanıma hazır bir çözümdür. — CoreUI Dokümantasyonu

Bileşen Kategorileri​

  1. Temel Bileşenler

    • Butonlar
    • Kartlar
    • Tablolar
    • Formlar
    • Navigasyon

  2. İleri Seviye Bileşenler

    • Grafikler
    • Veri tabloları
    • Bildirimler
    • Modal pencereler
    • Progress barlar
bilgi

CoreUI Pro sürümü, ek bileşenler ve gelişmiş özellikler sunar.

Tema Özelleştirme​

// SCSS ile özelleştirme
$theme-colors: (
  "primary": #321fdb,
  "secondary": #9da5b1,
  "success": #2eb85c,
  "info": #39f,
  "warning": #f9b115,
  "danger": #e55353
);

@import "@coreui/coreui/scss/coreui";
tehlike

Özelleştirmeler yaparken CoreUI'nin responsive yapısını bozmamaya dikkat edin.

Layout Sistemi​

  1. Temel Layout
<CContainer>
  <CHeader>
    <CHeaderBrand>Admin Panel</CHeaderBrand>
  </CHeader>
  
  <CWrapper>
    <CSidebar>
      <CSidebarNav>
        {/* Navigasyon öğeleri */}
      </CSidebarNav>
    </CSidebar>
    
    <CMain>
      {/* Ana içerik */}
    </CMain>
  </CWrapper>
</CContainer>
  1. Grid Sistemi
<CRow>
  <CCol md={6}>Sol Kolon</CCol>
  <CCol md={6}>Sağ Kolon</CCol>
</CRow>

Performans Optimizasyonları​

  1. Lazy Loading

    • Bileşenlerin gerektiğinde yüklenmesi
    • Route bazlı kod bölümleme
    • Görüntü optimizasyonu

  2. Bundle Optimizasyonu

    • Tree shaking
    • Modül bazlı import
    • CSS optimizasyonu
bilgi

CoreUI, modern build araçlarıyla uyumlu çalışarak optimum performans sağlar.

CoreUI vs Alternatifler​

  • Material UI ile karşılaştırıldığında daha admin panel odaklı
  • Ant Design ile karşılaştırıldığında daha hafif
  • Bootstrap ile tam uyumluluk

Pro vs Free Sürüm Karşılaştırması​

Pro Sürüm Ek Özellikleri:

  • AJAX veri tabloları
  • Gelişmiş form bileşenleri
  • E-posta şablonları
  • Ek dashboard şablonları
  • Premium destek

En İyi Uygulamalar​

  1. Proje Yapılandırması

    • Modüler yapı kullanımı
    • Bileşen bazlı organizasyon
    • Tutarlı isimlendirme

  2. Tema Yönetimi

    • Global tema değişkenleri
    • SCSS yapılandırması
    • Renk paleti standardizasyonu

  3. Responsive Tasarım

    • Breakpoint kullanımı
    • Mobile-first yaklaşım
    • Layout kontrolü

Özetle, CoreUI, modern admin panelleri ve dashboard uygulamaları geliştirmek için kapsamlı bir çözüm sunar. Hazır bileşenleri, tema sistemi ve framework desteğiyle geliştirme sürecini hızlandırır. Özellikle kurumsal uygulamalar ve yönetim panelleri için tercih edilebilecek olgun bir framework'tür.